<template>
  <div class="login-container">
    <!-- 背景装饰元素 -->
    <div class="background-shapes">
      <div class="shape shape-1"></div>
      <div class="shape shape-2"></div>
      <div class="shape shape-3"></div>
    </div>

    <!-- 登录表单容器 -->
    <div class="login-card">
      <!-- 登录头部 -->
      <div class="login-header">
        <div class="login-logo">
          <div class="logo-circle">
            <i class="fas fa-pills"></i>
          </div>
        </div>
        <div class="login-title">药品管理系统</div>
        <div class="login-subtitle">专业药品库存管理与追踪解决方案</div>
      </div>

      <!-- 登录表单 -->
      <el-form :model="admin" class="login-form">
        <div class="form-group">
          <label>用户名</label>
          <div class="input-with-icon">
            <i class="fas fa-user"></i>
            <el-input
                v-model="admin.uno"
                placeholder="请输入用户名"
                size="large"
                clearable
                @keyup.enter="onSubmit"
            />
          </div>
        </div>

        <div class="form-group">
          <label>密码</label>
          <div class="input-with-icon">
            <i class="fas fa-lock"></i>
            <el-input
                v-model="admin.upassword"
                placeholder="请输入密码"
                show-password
                size="large"
                clearable
                @keyup.enter="onSubmit"
            />
          </div>
        </div>

        <div class="form-group">
          <label>验证码</label>
          <div class="captcha-container">
            <div class="input-with-icon">
              <i class="fas fa-key"></i>
              <el-input
                  v-model="admin.captcha"
                  placeholder="验证码"
                  maxlength="5"
                  size="large"
                  @keyup.enter="onSubmit"
              />
            </div>
            <div class="captcha-img-wrapper" @click="loadCaptcha">
              <img v-if="!loading" :src="captcha" class="img-verCode" />
              <i v-else class="fas fa-sync-alt captcha-loading"></i>
            </div>
          </div>
        </div>
        <el-button
            class="login-button"
            type="primary"
            size="large"
            :loading="isLoading"
            @click="onSubmit"
        >
          <template #loading>
            <span class="loading-spinner"></span> 登录中...
          </template>
          <template #default>
            <i class="fas fa-sign-in-alt"></i> 登录系统
          </template>
        </el-button>
      </el-form>

      <!-- 页脚 -->
      <div class="login-footer">
        <div>药品管理系统 v3.0</div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { User, Lock, Key } from '@element-plus/icons-vue'
import { ElMessage, ElNotification } from 'element-plus'
import api from '@/api/index.js'
import { useRouter } from 'vue-router'

const router = useRouter();
const admin = ref({ uno: "", upassword: "", captcha: "" });
const captcha = ref("");
const isLoading = ref(false);
const captchaLoading = ref(false); // 单独控制验证码加载状态

// 加载验证码
async function loadCaptcha() {
  try {
    captchaLoading.value = true;
    const result = await api.getCaptcha();
    const index = result.indexOf("+");
    const key = result.substring(0, index);
    const data = result.substring(index + 1);
    sessionStorage.setItem("captchaKey", key);
    captcha.value = data;
  } catch (error) {
    ElMessage.error('验证码加载失败');
  } finally {
    captchaLoading.value = false;
  }
}

// 登录提交
async function onSubmit() {
  // 验证必填项
  if (!admin.value.uno || !admin.value.upassword || !admin.value.captcha) {
    ElNotification({
      title: '提示',
      message: '请填写完整登录信息',
      type: 'warning',
      position: 'bottom-right'
    });
    return;
  }

  isLoading.value = true;

  try {
    const result = await api.login(admin.value);

    // 检查用户状态
    if (result.ustatus === 'N') {
      ElNotification({
        title: '登录失败',
        message: '该账户已被禁用，请联系管理员',
        type: 'error',
        position: 'bottom-right',
        duration: 3000
      });
      loadCaptcha();
      return;
    }

    if (result) {
      // 存储用户信息到sessionStorage
      sessionStorage.setItem("token", result.token);
      sessionStorage.setItem("urole", result.urole);
      sessionStorage.setItem("uname", result.uname);
      sessionStorage.setItem("ustatus", result.ustatus);
      sessionStorage.setItem("uemail", result.uemail); // 存储用户状态

      ElMessage.success('登录成功');
      setTimeout(() => router.push('/'), 1500);
    }
  } catch (error) {
    ElMessage.error(error.message || '登录失败，请重试');
    loadCaptcha(); // 刷新验证码
  } finally {
    isLoading.value = false;
  }
}

// 初始加载验证码
loadCaptcha();
</script>

<style scoped>
:root {
  --primary-blue: #2c6ccf;
  --accent-blue: #3a86ff;
  --light-blue: #4a9df6;
  --white: #ffffff;
  --light-gray: #f8f9fa;
  --success: #27ae60;
  --danger: #e74c3c;
}

.login-container {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: linear-gradient(135deg, #e6f7ff 0%, #f0f8ff 100%);
  padding: 20px;
  position: relative;
  overflow: hidden;
}

/* 背景装饰元素 */
.background-shapes {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 0;
  overflow: hidden;
}

.background-shapes .shape {
  position: absolute;
  border-radius: 50%;
  opacity: 0.05;
  filter: blur(30px);
}

.shape-1 {
  width: 400px;
  height: 400px;
  background: #2c6ccf;
  top: -100px;
  left: -100px;
}

.shape-2 {
  width: 300px;
  height: 300px;
  background: #3a86ff;
  bottom: -50px;
  right: 200px;
}

.shape-3 {
  width: 250px;
  height: 250px;
  background: #4a9df6;
  top: 40%;
  left: 10%;
}


/* 登录卡片 */
.login-card {
  width: 100%;
  max-width: 450px;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 18px;
  box-shadow:
      0 20px 50px rgba(44, 108, 207, 0.15),
      0 10px 25px rgba(0, 0, 0, 0.05);
  padding: 45px 40px;
  z-index: 10;
  position: relative;
  overflow: hidden;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.4);
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.login-card:hover {
  transform: translateY(-8px);
  box-shadow:
      0 25px 60px rgba(44, 108, 207, 0.25),
      0 12px 30px rgba(0, 0, 0, 0.1);
}


/* 登录头部 */
.login-header {
  text-align: center;
  margin-bottom: 35px;
}

.login-logo {
  display: flex;
  justify-content: center;
  margin-bottom: 25px;
}

.logo-circle {
  width: 90px;
  height: 90px;
  border-radius: 50%;
  background: linear-gradient(135deg, #2c6ccf, #3a86ff);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 25px rgba(44, 108, 207, 0.35);
  position: relative;
  overflow: hidden;
}

.logo-circle::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(45deg, transparent, rgba(255,255,255,0.3), transparent);
  transform: translateX(-100%);
  animation: shine 2.5s infinite;
}

@keyframes shine {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

.logo-circle i {
  font-size: 40px;
  color: white;
  z-index: 2;
}

.login-title {
  font-size: 32px;
  font-weight: 700;
  background: linear-gradient(135deg, #2c6ccf, #3a86ff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 8px;
  letter-spacing: 1px;
}

.login-subtitle {
  font-size: 17px;
  color: #5a7ea9;
  font-weight: 400;
}

/* 登录表单 */
.login-form .form-group {
  margin-bottom: 28px;
  position: relative;
}

.login-form label {
  display: block;
  margin-bottom: 10px;
  font-weight: 600;
  color: #2c3e50;
  font-size: 16px;
}

.input-with-icon {
  position: relative;
}

.input-with-icon i {
  position: absolute;
  left: 18px;
  top: 50%;
  transform: translateY(-50%);
  color: #7f8c8d;
  font-size: 18px;
  z-index: 2;
}

/* 自定义Element Plus输入框样式 */
:deep(.el-input__wrapper) {
  width: 100%;
  padding: 1px 15px 1px 40px;
  border: 1px solid #dce4f0;
  border-radius: 10px;
  font-size: 15px;
  transition: all 0.3s;
  box-shadow: none !important;
  height: 48px;
  background: rgba(255, 255, 255, 0.8);
}

:deep(.el-input__wrapper.is-focus) {
  border-color: var(--accent-blue);
  outline: none;
  box-shadow: 0 0 0 3px rgba(58, 134, 255, 0.15) !important;
}

.captcha-container {
  display: flex;
  gap: 10px;
}

.captcha-img-wrapper {
  width: 130px;
  height: 48px;
  border-radius: 10px;
  overflow: hidden;
  cursor: pointer;
  border: 1px solid #dce4f0;
  transition: all 0.3s;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(250, 245, 247, 0.5);
  flex-shrink: 0;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.21);
}

.captcha-img-wrapper:hover {
  border-color: var(--accent-blue);
  transform: scale(1.02);
}


@keyframes spin {
  to { transform: rotate(360deg); }
}


:deep(.el-checkbox__label) {
  color: #5a7ea9;
  font-weight: 400;
}

:deep(.el-checkbox__input.is-checked .el-checkbox__inner) {
  background: var(--primary-blue);
  border-color: var(--primary-blue);
}

.login-button {
  width: 100%;
  padding: 16px 20px;
  background: linear-gradient(135deg, #2c6ccf, #3a86ff);
  color: white;
  border: none;
  border-radius: 12px;
  font-size: 17px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s;
  box-shadow:
      0 6px 15px rgba(44, 108, 207, 0.35),
      0 4px 8px rgba(0, 0, 0, 0.12);
  height: 55px;
  letter-spacing: 1.5px;
  position: relative;
  overflow: hidden;
}

.login-button::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(45deg, transparent, rgba(255,255,255,0.3), transparent);
  transform: translateX(-100%);
  animation: shine 2.5s infinite;
}

.login-button:hover {
  transform: translateY(-3px);
  box-shadow:
      0 10px 25px rgba(44, 108, 207, 0.45),
      0 6px 15px rgba(0, 0, 0, 0.18);
}

.login-button:active {
  transform: translateY(0);
}

.login-button span {
  position: relative;
  z-index: 2;
}

/* 加载动画 */
.loading-spinner {
  display: inline-block;
  width: 22px;
  height: 22px;
  border: 3px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  border-top-color: white;
  animation: spin 1s ease-in-out infinite;
  margin-right: 10px;
  vertical-align: middle;
}

/* 页脚 */
.login-footer {
  text-align: center;
  margin-top: 30px;
  color: #7f8c8d;
  font-size: 14px;
  border-top: 1px solid #f0f4f8;
  padding-top: 25px;
}


.captcha-container {
  display: flex;
  align-items: center;
  gap: 10px; /* 输入框与验证码图之间的间距 */
}

.captcha-img-wrapper {
  cursor: pointer;
  width: 120px; /* 调整为适合你页面布局的宽度 */
  height: 40px; /* 与输入框高度大致一致 */
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f9f9f9;
  border: 1px solid #ddd;
  border-radius: 4px;
}

.img-verCode {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain; /* 确保图片完整显示，按比例缩放 */
  vertical-align: middle;
}
/* 响应式设计 */
@media (max-width: 480px) {
  .login-card {
    padding: 35px 25px;
    max-width: 95%;
  }

  .login-title {
    font-size: 26px;
  }

  .login-subtitle {
    font-size: 15px;
  }


  .logo-circle {
    width: 75px;
    height: 75px;
  }

  .captcha-container {
    flex-direction: column;
  }

  .captcha-img-wrapper {
    width: 100%;
  }
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif;
}

body {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: linear-gradient(135deg, #e6f7ff 0%, #f0f8ff 100%);
  position: relative;
  overflow: hidden;
  padding: 20px;
}

</style>